<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		segment {
			display: block;
			margin: 0.5em;
		}
	</style>

	<script type="text/javascript">
		cola(function (model) {
			cola.util.dictionary("direction", {
				east: "东",
				south: "南",
				west: "西",
				north: "北"
			});

//			cola.util.dictionary("direction", [
//				{key: "east", value: "东"},
//				{key: "south", value: "南"},
//				{key: "west", value: "西"},
//				{key: "north", value: "北"}
//			]);
		});
	</script>
</head>
<body style="padding:1em;">

<segment>
	<label c-bind="translate('direction', value)"></label>
</segment>

<segment>
	<c-dropdown c-bind="value" c-items="dictionary('direction')"></c-dropdown>
</segment>

<segment>
	<c-select-button c-bind="value" c-items="dictionary('direction')"></c-select-button>
</segment>

<segment>
	<c-radio-group c-bind="value" c-items="dictionary('direction')"></c-radio-group>
</segment>

<segment>
	<input c-bind="value">
</segment>

</body>
</html>